<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <!-- v-show和v-if都可以用来控制标签的显示和隐藏
    <标签 v-show ='布尔值'></标签> 
    <标签 v-if ='布尔值'></标签> 
当布尔值为true，他们就显示：当布尔值为false，他们就隐藏-->
    <div id="app">
        <div v-show="display">我是有v-show控制的</div>
        <div v-if="display">我是有v-if控制的</div>
    </div>
    <script src="../../js/vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                display:true
            }
        })
    </script>
    <!-- 面试题！重要！重要！重要！
    【v-show】
    1.本质就是标签display设置为none，控制隐藏。 只是基于CSS进行切换
    2.v-show有更高的初始渲染消耗
    3.v-show适合频繁切换的情况

    【v-if】
    1.动态的向DOM树内添加或者删除DOM元素。
    2.v-if有更高的切换消耗
    3.v-if适合运行条件很少改变的情况。
    -->
</body>
</html>